<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

		<link rel="stylesheet" href="../css/basecss.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" href="../css/normalize.css" />
		<link rel="stylesheet" href="../assets/fonticon/iconfont.css" />
		<link rel="stylesheet" href="../css/sy/sy.css" />
		<link rel="stylesheet" href="../dist/css/swiper.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

		<!-- 引入样式 -->

		<!-- 引入组件库 -->

		<style>

		</style>
	</head>
	<body>
		<div class="home" id="home">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<!--          首页第一块展示区域-->
					<div class="swiper-slide sy">
						<!--          右侧图标导航-->
						<div class="righticon animate__animated" :class="{animate__fadeInLeft:0==index}">

							<i class="iconfont icon-huodong " @mouseover="mouseover(1)" @mouseleave="mouseleave(0)"
								@click="topath('new')"></i>


							<i class="iconfont icon-chanpin " @mouseover="mouseover(2)" @mouseleave="mouseleave(0)"
								@click="topath()"></i>


							<i class="iconfont icon-icon_huabanfuben" @mouseover="mouseover(3)"
								@mouseleave="mouseleave(0)" @click="topath('our')"></i>


							<i class="iconfont icon-fuwu" @mouseover="mouseover(4)" @mouseleave="mouseleave(0)" @click="topath('contact')"></i>

						</div>
						<!--          背景图片区域-->
						<div class="bgimglist">

							<img src="../assets/img/bg2.jpg" class="bgimg animate__animated"
								:class="{useopacity:0==ifopaciaty}" />
							<img src="../assets/img/bg3.jpg" class="bgimg animate__animated"
								:class="{useopacity:1==ifopaciaty}" />
							<img src="../assets/img/bg4.jpg" class="bgimg animate__animated"
								:class="{useopacity:2==ifopaciaty}" />
							<!--                <div class="bgimg animate__animated"   :class="{useopacity:0==ifopaciaty}" style="background-image: url(src/assets/img/bg1.jpg)"></div>-->


						</div>
						<div class="title">
							<div><img src="../assets/img/bg1.png" class="titleimg animate__animated"
									:class="{animate__zoomIn:0==index}" /> </div>
							<div class="animate__animated " :class="{animate__fadeInLeftBig:0==index}"> 专注于IT服务、信息化、智能化
							</div>
							<div class="animate__animated " :class="{animate__fadeInRightBig:0==index}">为社会服务注入智慧动力、
								科技促进生产力</div>
						</div>

						<div class="bottominfo">www.RayGrid.com.cn 2013·广州睿格信息科技有限公司·版权所有粤ICP备12015963号-2</div>
					</div>
					<!--          首页第二块展示区域-->
					<div class="swiper-slide sy2">
						<div class="righticon animate__animated" :class="{animate__fadeInLeft:1==index}">

							<i class="iconfont icon-huodong " @mouseover="mouseover(1)" @mouseleave="mouseleave(0)"
							@click="topath('new')"></i>
							<i class="iconfont icon-chanpin " @mouseover="mouseover(2)" @mouseleave="mouseleave(0)"
							@click="topath()"></i>
							<i class="iconfont icon-icon_huabanfuben" @mouseover="mouseover(3)"
								@mouseleave="mouseleave(0)" @click="topath('our')"></i>
							<i class="iconfont icon-fuwu" @mouseover="mouseover(4)" @mouseleave="mouseleave(0)" @click="topath('contact')"></i>

						</div>
						<!--            背景图片区域-->
						<img src="../assets/img/sy2.jpg"></img>
						<div class="title2">
							<p class="animate__animated delay1" :class="{animate__rollIn:1==index}">
								平台协助协会为事务所及注师提供智能化服务,提高报备效率</p>
							<p class="animate__animated delay2" :class="{animate__backInLeft:1==index}">
								更有利注师继续教育,加强诚信执业检查,提升行业服务水平 !</p>
						</div>
					</div>
					<!--          首页第三块展示区域-->
					<div class="swiper-slide">
						<div class="sy3">
							<div class="firstsy3">
								<div class="sy3title">
									<p> 研发产品</p>
									<p class="animate__animated animate__slow" :class="{animate__zoomInDown:2==index}">
										Develop Product</p>
								</div>
								<div class="imgshowlist">
									<div>
										<img src="../assets/img/jianbianbj2.png" class="animate__animated delay1"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:1==bigindex}]"
											@mouseover="ifbig(1)" @mouseleave="ifbig(0)">
									</div>
									<div>
										<img src="../assets/img/sfq2.jpg" class="animate__animated delay2"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:2==bigindex}]"
											@mouseover="ifbig(2)" @mouseleave="ifbig(0)">
									</div>
									<div>
										<img src="../assets/img/nav.jpg" class="animate__animated delay3"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:3==bigindex}]"
											@mouseover="ifbig(3)" @mouseleave="ifbig(0)">
									</div>
									<div>
										<img id="img" src="../assets/img/picone.jpg" class="animate__animated delay4"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:4==bigindex}]"
											@mouseover="ifbig(4)" @mouseleave="ifbig(0)">
									</div>

								</div>
								<div class="block  animate__animated delay2" :class="{animate__fadeInUp:2==index}"
									id="timeline">
									<el-timeline>
										<el-timeline-item v-for="(activity, index) in activities" :key="index"
											:icon="activity.icon" :type="activity.type" :color="activity.color"
											:size="activity.size" :timestamp="activity.timestamp">
											<div>{{activity.content}}</div>
										</el-timeline-item>
									</el-timeline>
								</div>

							</div>
							<div class="secendsy3">
								<div class="sy3title ">
									<p> 自己产品</p>
									<p class="animate__animated animate__slow" :class="{animate__zoomInDown:2==index}">
										Develop Product</p>
								</div>
								<div class="imgshowlist">
									<div>
										<img src="../assets/img/jianbianbj2.png" class="animate__animated delay1"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:1==bigindex}]"
											@mouseover="ifbig(1)" @mouseleave="ifbig(0)">
									</div>
									<div>
										<img src="../assets/img/sfq2.jpg" class="animate__animated delay2"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:2==bigindex}]"
											@mouseover="ifbig(2)" @mouseleave="ifbig(0)">
									</div>
									<div>
										<img src="../assets/img/nav.jpg" class="animate__animated delay3"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:3==bigindex}]"
											@mouseover="ifbig(3)" @mouseleave="ifbig(0)">
									</div>
									<div>
										<img src="../assets/img/picone.jpg" class="animate__animated delay4"
											:class="[{animate__fadeInLeftBig:2==index},{tobig:4==bigindex}]"
											@mouseover="ifbig(4)" @mouseleave="ifbig(0)">
									</div>

								</div>
								<div class="block  animate__animated delay2" :class="{animate__fadeInUp:2==index}">
									<el-timeline>
										<el-timeline-item v-for="(activity, index) in activities" :key="index"
											:icon="activity.icon" :type="activity.type" :color="activity.color"
											:size="activity.size" :timestamp="activity.timestamp">
											<div>{{activity.content}}</div>
										</el-timeline-item>
									</el-timeline>
								</div>

							</div>
							<div @click="torightpage()" v-show="0!=iffinal"><i class="iconfont icon-you  topageright" ></i></div>
							                
							<div @click="toleftpage()" v-show="0!=iffirst"><i class="iconfont icon-you  topageleft" ></i></div>
						</div>
					</div>
							
			<!-- 		首页第四块展示区域 -->
					<div class="swiper-slide sy4">
						<div class="imgshowlist">
							<div class="imgitem" v-for="(item,index) in imglist" :key="index"
								:style="{transform:item.activetransform}">
								<div class="imgcontent">
									<img :src="item.imgurl" />
									<div class="imgtime">{{item.imgtime}}</div>
								</div>
								<p>{{item.imginfo}}</p>
								<p>{{item.imginfo}}</p>
							</div>
						</div>
						<div class="lookmore">
							查看更多
						</div>
					</div>
					
			<!-- 		首页第五块展示区域 -->
					<div class="swiper-slide sy5">
						<div class="imgshowlist">
							<div class="imgitem" v-for="(item,index) in imglist" :key="index"
								:style="{transform:item.activetransform}">
								<div class="imgcontent">
									<img :src="item.imgurl" />
									<div class="imgtime">{{item.imgtime}}</div>
								</div>
								<p>{{item.imginfo}}</p>
								<p>{{item.imginfo}}</p>
							</div>
						</div>
						<div class="lookmore">
							查看更多
						</div>
					</div>
					
				</div>
					<div class="swiper-pagination"></div>
				</div>
		</div>

		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="../dist/js/swiper.min.js"></script>
		<script>
			var app = new Vue({				
				el: '#home',
				mounted() {	
					document.querySelector('#img').addEventListener('animationend', () => {
					this.index=0
					});
					var myswiper = new Swiper('.swiper-container', {
						observer:true,
						observeParents: true,
						direction: 'vertical',
						mousewheelControl: true,
						loop: false,
						pagination: '.swiper-pagination',
						paginationClickable: true,
						effect: 'fade',
						fade: {
							crossFade: true,
						},
						onSlideChangeEnd: (swiper) => {
							this.index = swiper.activeIndex			
						}
				
					})
					console.log(myswiper)
					//监听id为timeline的元素上的动画是否结束如果结束则将控制当前模块的index设置为0,以停止当前模块的动画
					
				},
				data: {
					index: 0, // 控制每个模块的翻页的初始化动画
					iftada: 0, //控制小图标的动画
					ifopaciaty: 0,
					// 第四个轮播图的图片列表
					imglist: [{
							imgurl: '../assets/img/new1.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(15deg)',
							delay: '0.2s',

						},
						{
							imgurl: '../assets/img/new2.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(-34deg)',
							delay: '0.4s'
						},
						{
							imgurl: '../assets/img/new3.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(13deg)',
							delay: '0.6s'
						},
						{
							imgurl: '../assets/img/new4.jpg',
							imginfo: '睿格信息2',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(40deg)',
							delay: '0.8s'
						},
						{
							imgurl: '../assets/img/new5.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(-23deg)',
							delay: '0.9s'
						},
						{
							imgurl: '../assets/img/new6.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',	
							activetransform: 'rotateZ(-22deg)',
							delay: '0.2s'
						},
						{
							imgurl: '../assets/img/new7.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(-6deg)',
							delay: '0.4s'
						},
						{
							imgurl: '../assets/img/new8.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(15deg)',
							delay: '0.6s'
						},
						{
							imgurl: '../assets/img/new9.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: 'rotateZ(-14deg)',
							delay: '0.8s'
						},
						{
							imgurl: '../assets/img/new10.jpg',
							imginfo: '睿格信息',
							imgtime: '2012年12月28日',
							activetransform: ' rotateZ(18deg)',
							delay: '0.9s'
						}
					],
					bigindex: 0,
					iffirst: 0, //控制第三个轮播图模块下面的左侧按钮是否显示
					iffinal: 1, //控制第三个轮播图模块下面的右侧按钮是否显示
					sy3firstmarginLeft: 0, //控制第三个轮播图模块第一个研发界面距离左侧的距离，控制这个可以改变现实的界面
					// 第三个轮播图右侧时间线
					activities: [{
						content: 'PPM生产管理系统',
						timestamp: '2018-04-12 20:46',
						size: 'large',
						type: 'primary',
						icon: 'el-icon-more'
					}, {
						content: 'JCX进销存管理',
						timestamp: '2018-04-03 20:46',
						color: '#0bbd87'
					}, {
						content: 'CRM客户管理系统',
						timestamp: '2018-04-03 20:46',
						size: 'large'
					}, {
						content: 'POS收银系统',
						timestamp: '2018-04-03 20:46'
					}],


				},
				methods: {
					mouseover(index) {
						this.iftada = index;
						console.log(this.iftada)
					},
					mouseleave(index) {
						this.iftada = index
						
					},
					topath(path){
					  _mthis=window;
					  console.log(_mthis)
					  _mthis.location.href = `./${path}.html`;
					},
					ifbig(index) {
						this.bigindex = index
					},
					torightpage() {
						this.iffirst += 1;
						this.iffinal -= 1;
						this.sy3firstmarginLeft -= 100;
						this.index=2;
						console.log(this.index)
						document.querySelector(".firstsy3").style.marginLeft = `${this.sy3firstmarginLeft}vw`
					},
					toleftpage() {
						this.iffirst -= 1;
						this.iffinal += 1;
						this.sy3firstmarginLeft += 100;
						this.index=2;
						document.querySelector(".firstsy3").style.marginLeft = `${this.sy3firstmarginLeft}vw`
					}

				}
			})
		</script>
	
	</body>
</html>
